// 每个object3d类包含四个属性：
// 1、 positon  Vector3对象
// 2、rotation 旋转
// 3、scale 缩放
// 4、

import React, { useEffect, useRef } from 'react';
import * as THREE from 'three';

export default function index() {
  const mountRef = useRef(null);
  useEffect(() => {
    const scene = new THREE.Scene();
    // object
    const box = new THREE.BoxGeometry(1, 1, 1);
    const meterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
    const mesh = new THREE.Mesh(box, meterial);
    // 1、position x\y\z
    mesh.position.x = 1;
    mesh.position.y = 2;
    mesh.position.z = 1;

    // 2、 rotation x\y\z  object.rotation.旋转轴
    mesh.rotation.x = Math.PI * 0.5;
    mesh.rotation.y = 3;
    mesh.rotation.z = 2;
    // mesh.rotation.set = (2,3,2);

    // 3、scale
    mesh.scale.x = 3;
    mesh.scale.y = 3;
    mesh.scale.z = 3;
    scene.add(mesh);

    const camera = new THREE.PerspectiveCamera(75);
    camera.position.set(1, 2, 10);
    scene.add(camera);

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    mountRef.current.appendChild(renderer.domElement);
    renderer.render(scene, camera);
  }, []);
  return (
    <div
      ref={mountRef}
      style={{ width: '100%', height: '100%' }}
    />
  );
}
